<!--
 * @Description:
 * @Author: oscar
 * @Date: 2021-12-03 16:20:30
-->
<template>
  <h3>账号列表</h3>
  <el-row>
    <el-col :span="24">
      <div class="search-bar">
        <el-form ref="form" :inline="true" :model="form" label-width="80px">
          <el-form-item label="账号名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="form.region" placeholder="请选择状态">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-col>

    <el-col :span="24">
      <div class="act-bar">
        <el-button>全选/反选</el-button>
        <el-button type="primary">编辑</el-button>
        <el-button type="warning" @click="deleteEvent">删除</el-button>
        <el-button type="danger">禁用</el-button>
        <el-button type="success">下载</el-button>
      </div>

      <div class="data-table">
        <el-table ref="multipleTable" 
         @selection-change="handleSelectionChange"
         :data="tableData" border style="width: 100%">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="date" label="Date" width="180" />
          <el-table-column prop="name" label="Name" width="180" />
          <el-table-column prop="address" label="Address" />
        </el-table>

        <div class="pages-bar">
          <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
        </div>

      </div>
    </el-col>
  </el-row>
</template>

<script lang="ts">
import { getAccountList } from "@/api/account";
import { ElMessageBox } from "element-plus"
export default {
  name: "account-list",
  data() {
    return {
      form: {
        name: '',
        region: ''
      },
      multipleSelection: [],
      tableData: [
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        }
      ]
    }
  },
  setup() {
    console.log("setup...");
    // const param = {}
    // const getList = (param) => {
    //   getAccountList(param).then( res => {
    //     console.log( res )
    //   })
    // }
  },
  created() {
    console.log("created...");
    this.getList();
  },
  methods: {
    getList() {
      const param = {
        p:1,
        limit: 10
      };
      getAccountList(param).then((res) => {
        console.log(res);
      });
    },

    onSubmit() {
      console.log('submit!')
    },

    deleteEvent() {
       ElMessageBox.confirm('确定要删除选择的数据吗？')
        .then(() => {
          console.log('success')
        })
        .catch(() => {
          // catch error
        })
    }
  },
};
</script>
